var dls = document.getElementsByClassName("title_coffee")[0].children;
console.log(dls);
var divs = document.getElementsByClassName("tatol")[0].children;
console.log(divs);
var as = document.getElementsByClassName("coffee_text")[0].children;
console.log(as);
for (var i = 0; i < dls.length; i++) {
    dls[i].onclick = function () {
        for (var i = 0; i < dls.length; i++) {
            dls[i].className = "";
            // console.log(i);
            divs[i].className = "pictrue_text";
            // console.log(divs[i]);
            as[i].className="";
            console.log(as[i]);
        }
        this.className = "active";
        var j = this.getAttribute("hh");
        divs[j].className="pictrue_text news_text course_text active1"
        as[j].className="active2"

    }
}

var banner = document.getElementById("banner")
var btns = banner.getElementsByTagName("button")
var imgs = banner.getElementsByClassName("banner_img")[0]
var ul = banner.getElementsByTagName("ul")[0]
var lis = ul.getElementsByTagName("li")
var count = 0;
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {

        if (this.innerHTML == "&gt;") {
            count++
            if (count == 4) {
                count = 0
            }
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = ""
            }
            imgs.style.marginLeft = count * (-100) + "%"
            lis[count].className = "active"
        } else {
            count--
            if (count == -1) {
                count = 3
            }
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = ""
            }
            imgs.style.marginLeft = count * (-100) + "%"
            lis[count].className = "active"
        }
    }
}

for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        count = this.getAttribute("hh")
        //  console.log(1);
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = ""
        }
        imgs.style.marginLeft = count * (-100) + "%"
        lis[count].className = "active"
    }
}

timer = setInterval(function () {
    count++
    if (count == 4) {
        count = 0
    }
    for (var i = 0; i < lis.length; i++) {
        lis[i].className = ""
    }
    imgs.style.marginLeft = count * (-100) + "%"
    lis[count].className = "active"
}, 1500)

banner.onmouseover = function () {
    clearInterval(timer);
}
banner.onmouseout = function () {
    timer = setInterval(function () {
        count++
        if (count == 4) {
            count = 0
        }
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = ""
        }
        imgs.style.marginLeft = count * (-100) + "%"
        lis[count].className = "active"
    }, 1500)
}